<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> 停车场管理系统 </title>
    <script type="module" crossorigin src="./index.LQR6veXt.js"></script>
    <link rel="stylesheet" crossorigin href="./index.DICjQx5F.css">
  </head>
  <body>
    <div
      id="app"
      style="
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: stretch;
      "
    ></div>
    <!-- <script src="./src/assets/js/axios.min.js"></script> -->
    <!-- <script src="./src/assets/js/chart.js"></script> -->
    <!-- <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
  </body>
</html>

<style>
  .parking-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10列 */
    gap: 10px; /* 间距 */
    padding: 20px;
  }

  .parking-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #28a745; /* 空闲车位颜色 */
    color: white;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease; /* 平滑过渡 */
  }

  .parking-slot.occupied {
    background-color: #dc3545; /* 占用车位颜色 */
  }

  .dropdown-menu {
    display: none;
  }

  .dropdown-menu.show {
    display: block;
  }
</style>
